<template>
	<view class="container">
		<view class="seri-title font76 tc mt10 md10">{{goodsInfo.serialtitle}}</view>
		<view class="sub-seri-title font60 tc mt10 md10">{{goodsInfo.subSerialTitle}}</view>
		<view class="img-box mg20 br12" :style="{'backgroundColor':goodsInfo.bgColor}">
			<view class="ad-tit-box" v-if="goodsInfo.adTitle">
				<view class="ad-title tc font55 adColor">{{goodsInfo.adTitle}}</view>
				<view class="sub-ad-title tc font40 adColor mt10">{{goodsInfo.subAdTitle}}</view>
			</view>
			<view class="item-box br12 pd20 flex" >
				<image :src="item.goodsImgUrl"  v-for="(item, index) in goodsInfo.list" @click="routerGo(item)" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  name: 'GoodsCard',
	  props: {
		  goodsInfo: {
		  	type: Object
		  }
	  },
	  data: function() {
	    return {}
	  },
	  methods: {
		onLoad(){
			console.log(this.goodsInfo)
		},
	    routerGo(item) {
	      this.$yrouter.push({
	        path: '/packageShop/pages/shop/GoodsCon/index',
	        query: {
	          id: item.id,
	        },
	      })
	    },
	  },
	  mounted() {},
	}
</script>

<style lang="scss">
	.container{background-color: #ffffff;padding:20rpx 0 20rpx 0;}
	.pd20{padding:20rpx;}
	.mg20{margin:20rpx;}
	.tc { text-align: center; }
	.mt10{margin-top:10rpx;}
	.mt40{margin-top:40rpx;}
	.md10{margin-top:10rpx;}
	.wd100{width:100%;}
	.font76{font-size:60rpx;}
	.font60{font-size:45rpx;}
	.font55{font-size:40rpx;}
	.font40{font-size:26rpx;}
	.titColor{color: #010101;}
	.adColor{color:#ffffff;}
	.br12{border-radius: 12rpx;}
	.flex{display:flex}
	
	.ad-tit-box{padding:30rpx 0 30rpx 0;}

	.imgbg{
		width:80%;
		height:80%;
	}
	.imgbg image{ width:100%;height:100% }
	.item-box{
		display:flex;flex-direction: row;justify-content: space-between;
		.title {
			text-align: center;
		}
		image{ width: 49%;}
	}
	.item{
		width:324rpx;height:512rpx;background-color: #efefef;
		display: flex;justify-content: center;
	}
	
</style>